{% extends 'base.html' %}

{% block css%}
<style type="text/css">
 
</style>
{% endblock %}

{% block body%} 
<div class="row">
    <!-- <div class="col-md-4">
        <img id="fig" src="/plot.png" alt="my plot">
    </div> -->
    <!-- <div id="main" style="width: 900px;height:600px;"></div> -->

    <div class="col-md-6">
        <h3>Test Case</h3>
        <table class="table">
            <tr>
                <td>
                    <button class="btn btn-success btn-lg" id="btn_scan_freq">
                    #1 Scan Freq
                    </button>
                </td>

                <td class="hide">
                    <input style="width: 400px" type="text" id="ch" value="-15, -10, -5, 0, 5, 10, 15, 20, 25, 30"> <br>
                    <span style="color: #ccc">ch: Comma separated string, range -15~30</span>
                </td>

            </tr>

            <tr>
                <td>
                    <button class="btn btn-success btn-lg" id="btn_fixed_freq">
                    #2 Fixed Freq
                    </button>

                </td>
                <td class="hide">
                    <input type="text" id="FreqChn" value="0"> <br>
                    <span style="color: #ccc">ch: range -15~30</span>
                </td>
                
            </tr>

            <tr>
                <td  colspan=2 style="background-color: #FFFFCC; color: #99CC66; font-size: 28px">
                    <i id="ping_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                    <span id="cmd_btn_block_info1">-</span>
                </td>
            </tr>

            <tr>
                <td colspan=2>
                    <span style="color: #ccc">
                        <i id="ping_loading" class="fa fa-info-circle"></i>
                        For detail output info see console window.
                    </span>
                    <br>
                    <span style="color: #ccc">
                        <i id="ping_loading" class="fa fa-info-circle"></i>
                        You can adjust the test parameters in the Config.ini file.
                    </span>
                    
                </td>
            </tr>

        </table>


    </div>

</div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">
// var t;
// function refresh()
// {
//     $("#fig").attr('src', '/plot.png'); 
// }


// function auto_refresh()
// {
//     $.get("/plot.png", function(result){
//             //$("div").html(result);
//             // refresh();
//             $("#fig").attr('src', '/plot.png'); 
//     });

//     t = setTimeout(auto_refresh, 2500);
// }

// auto_refresh();

// $(document).ready(function(){

//     $("#refresh").click(function(){
//         $.get("/plot.png", function(result){
//             //$("div").html(result);
//             refresh();
//         });
//    })

// });

    // function chart()
    // {
    //     var myChart = echarts.init(document.getElementById('main'));

    //     $.get("/charts", function(ret){
    //         console.log(typeof(ret))
    //         console.log(ret);
            
    //         option = {
    //             animation: false,
    //             color: ['blue'],
    //             xAxis: {
    //                 scale: true
    //             },
    //             yAxis: {
    //                 scale: true
    //             },
    //             series: [{
    //                 type: 'effectScatter',
    //                 symbolSize: 20,
    //                 data: [
    //                     // [172.7, 105.2],
    //                     // [153.4, 42]
    //                 ]
    //             }, {
    //                 type: 'scatter',
    //                 data: eval("("+ret+")"),
    //             }]
    //         }; //option end
    //         // display chart with config options
    //         myChart.setOption(option);
    //     });
    // }

    // function auto_refresh()
    // {
    //     chart();
    //     t = setTimeout(auto_refresh, 1000);
    // }

    // auto_refresh();

    // $(document).ready(function(){
    //     chart();
    // });


function dis_btns()
{
    $("#btn_scan_freq").attr("disabled", true);  
    $("#btn_fixed_freq").attr("disabled", true);  
}

function en_btns()
{
    $("#btn_scan_freq").attr("disabled", false);  
    $("#btn_fixed_freq").attr("disabled", false);  
}

$(document).ready(function(){
    $("#ping_loading").hide();
    en_btns();

    $("#btn_scan_freq").click(function(){
        $("#ping_loading").show();
        $("#cmd_btn_block_info1").html("Running ...");
        dis_btns();
        ch = $("#ch").val().replace(/\s*/g,"");
    
        $.post("/btn_scan_freq",
        {
            ch:ch,
        },
        function(data,status){
            if(data == "error")
            {
                ret = "Error!"; 
            }
            else
            {
                ret = "<a href=./static/files/" + data + "> Download test report. </a>"; 
            }

            $("#cmd_btn_block_info1").html(ret);
            $("#ping_loading").hide();
            en_btns();
        });

   });


    $("#btn_fixed_freq").click(function(){
        $("#ping_loading").show();
        $("#cmd_btn_block_info1").html("Running ...");
        dis_btns();
        FreqChn = $("#FreqChn").val();

        $.post("/btn_fixed_freq",
        {
            FreqChn:FreqChn,
        },
        function(data,status){
            if(data == "error")
            {
                ret = "Error!"; 
            }
            else
            {
                ret = "<a href=./static/files/" + data + "> Download test report. </a>"; 
            }

            $("#cmd_btn_block_info1").html(ret);
            $("#ping_loading").hide();
            en_btns();
        });

   });

});


</script>



{% endblock %}